<template>
	<div class="comnav">
		<div class="comnavbt"  
			v-for="(item,index) in biaoti" 
			:class="{active: comnavct === index}" 
			:key="index" 
			@:click="comnavClick(index)">{{item}}</div>
	</div>
</template>
<script>
	export default {
		name:'Comnav',
		props:{
			biaoti:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return {
				comnavct:0
			}
		},
		methods:{
			comnavClick (index){
				this.comnavct=index;
				this.$emit('comtabclick',index)
			}
		}
	}
</script>
<style scoped>
	.comnav{
		width: 100%;
		height: 40px;
		background-color: #f3f3f3;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.comnavbt{
		font-size: 15px;
		font-weight: bold
	}
	.active{
		color: #fea7bd;
		border-bottom: 4px solid #fea7bd;
		padding-bottom: 3px;
		background-color: #f3f3f3
	}
</style>